<!--
 测评管理-新首页
-->
<template>
  <div class="evaluation-org-list-box">
    <div v-if="list.length" class="list-ul">
      <el-scrollbar style="height: calc(100% - 40px)">
        <div
          :class="['list-li', item.id === curId ? 'select' : '']"
          v-for="item in list"
          :key="item.id"
          @click.stop="onClick(item)">
          <div class="triangle-tips top-left bg-red" v-if="item.dataValid == '0'">
            <span>
              <em>无效</em>
            </span>
          </div>
          <div class="li-head">
            <div class="title">{{ item.assessmentTitle }}</div>
          </div>
          <div class="li-center">
            <div :class="['status', `status_${item.assessmentStatus}`]">
              {{ statusTxt[item.assessmentStatus] }}
            </div>
          </div>
          <div class="li-bottom">
            <div class="create-name">{{ item.createByOrgName }}</div>
            <div class="create-time">{{ item.createTime.slice(0, 10) }}</div>
          </div>
        </div>
      </el-scrollbar>
      <div class="page_r">
        <el-pagination
          background
          layout="pager,total"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.totalSize"
          @current-change="onPageChange"
          :hide-on-single-page="false"
          :pager-count="5"
          small></el-pagination>
      </div>
    </div>
    <div v-else class="list-ul empty-box">暂无数据</div>
  </div>
</template>
<script>
import { orgGetAssessmentData } from '@apis/mzEvaluation.js'

export default {
  name: 'AuditOrgList',
  props: {
    params: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    params: {
      handler(obj) {
        if (obj.key) {
          if (this.isFirst) {
            const { id = '' } = this.$route.query || {}
            this.curId = id
            this.isFirst = false
          } else {
            this.curId = ''
          }

          this.getOrgList()
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      curId: '',
      list: [],
      //  -2 草稿 -1 待审核 0 审核未通过 1审核通过未开始 2收集中 3已结束 4已暂停
      statusTxt: {
        '-2': '草稿',
        '-1': '待审核',
        0: '审核未通过',
        1: '审核通过',
        2: '进行中',
        3: '已结束',
        4: '已暂停',
      },
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      isFirst: true,
    }
  },
  methods: {
    getOrgList() {
      const params = Object.assign(this.params, {
        id: this.curId,
        pageNum: this.tablePage.currentPage,
      })
      orgGetAssessmentData(params).then(res => {
        const { content = [], totalSize = 0 } = res.data || {}
        this.tablePage.totalSize = totalSize
        this.list = content.concat()
        let obj = {}
        if (content && content.length) {
          const inx = content.findIndex(item => item.id === this.curId)
          if (this.curId && inx > -1) {
            obj = content[inx]
          } else {
            obj = content[0]
            this.curId = obj.id
          }
        } else {
          obj = {}
          this.curId = ''
        }
        this.$emit('select', obj)
      })
    },
    onClick(obj) {
      if (this.curId === obj.id) return
      this.curId = obj.id
      this.$emit('select', obj)
    },

    /* 监听页码切换 */
    onPageChange(e) {
      this.tablePage.currentPage = e
      this.curId = ''
      this.getOrgList()
    },
  },
}
</script>
<style lang="scss" scoped>
.evaluation-org-list-box {
  // padding-left: 25px;
  height: 100%;
  .list-ul {
    border: 1px solid #dcdfe6;
    // box-shadow: 4px 3px 4px 0 rgba(0, 0, 0, 0.12);
    height: 100%;
    position: relative;
    overflow: hidden;
    .list-li {
      border-bottom: 1px solid #dcdfe6;
      min-height: 100px;
      cursor: pointer;
      padding: 20px;
      position: relative;
      &:hover,
      &.active,
      &.select {
        background: #5a96e9;
        border-color: #fff;
        .li-head {
          .title {
            color: #fff;
            border-color: #fff;
          }
        }
        .li-center {
          .status {
            color: #fff;
            border-color: #fff;
          }
        }
        .li-bottom {
          .create-time,
          .status,
          .create-name {
            color: #fff;
            border-color: #fff;
          }
        }
      }
      &:hover {
        opacity: 0.8;
      }
      .li-head {
        margin-bottom: 10px;
        .title {
          font-size: 14px;
          color: #333;
          font-size: 500;
          flex: 1;
        }
      }
      .li-center {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
        .status {
          min-width: 65px;
          height: 24px;
          padding: 3px 5px;
          text-align: center;
          font-size: 12px;
          border: 1px solid #dcdfe6;
          color: #999;
        }
        .status_-1 {
          border-color: #1852a3;
          color: #1852a3;
        }
        .status_0 {
          border-color: #d81e06;
          color: #d81e06;
        }
        .status_1 {
          border-color: #70b603;
          color: #70b603;
        }
      }
      .li-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .create-time {
          font-size: 12px;
          color: #999;
        }

        .create-name {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .triangle-tips {
      position: absolute;
      z-index: 1;
      right: 0;
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      span {
        position: absolute;
        right: 0;
        width: 0;
        height: 0;
        em {
          position: absolute;
          height: 40px;
          width: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-style: normal;
          font-size: 12px;
        }
      }
      &.top-left {
        left: 0;
        top: 0;
        span {
          top: 0;
          border-right: 40px solid transparent;
          border-top: 40px solid#62a2fc;
        }
        em {
          top: -46px;
          left: -7px;
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }
        &.bg-red {
          span {
            border-top-color: #d81e06;
          }
        }
      }
    }

    .page_r {
      margin-top: 9px;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #004db6;
    }
  }
  .empty-box {
    font-size: 13px;
    color: #666;
    display: flex;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
</style>
